<template>
	<div class="admin-nav">
        <div class="admin-content">
			<!-- 左边导航 -->
			<div class="admin-left-nav">
                <!-- 运营商信息 -->
                <div class="admin-left-nav-top e-p-b-20">
					<!-- <div class="item" style="padding-left: 15px;background: var(--main);padding: 10px 15px;">
						<img src="/images/logo-white.png" alt="" height="40">
					</div> -->
                    <!-- <div class="item">
                        <el-avatar :size="70" icon="el-icon-user-solid" :src="adminInfo.photo == '' ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' : fileURL+adminInfo.photo"></el-avatar>
                        <div class="e-p-b-5 e-p-t-5">{{ adminInfo.name }}</div>
                        <div class="e-font-14"><el-tag type="info" size="mini">{{ adminInfo.type }}</el-tag></div>
						<div class="e-p-b-5 e-p-t-10">余额:<span class="num">{{ utils.formatMoney(13565) }}</span><small>元</small></div>
                        <div class="e-p-t-10">
							<el-tooltip content="充值" placement="bottom" effect="light">
								<el-button size="mini" circle><i class="iconfont icon-wanchengjiesuan e-font-12"></i></el-button>
							</el-tooltip>
							<el-tooltip content="编辑" placement="bottom" effect="light">
								<el-button size="mini" icon="el-icon-edit" circle></el-button>
							</el-tooltip>
							<el-tooltip content="退出" placement="bottom" effect="light">
								<el-button size="mini" icon="el-icon-switch-button" @click="logout" circle></el-button>
							</el-tooltip>
                        </div>
                    </div>
                    <div class="item">
                        <div class="e-p-b-5">余额:<span class="num">{{ utils.formatMoney(13565) }}</span><small>元</small></div>
                        <div>
                            <el-button size="mini">查看</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button size="mini">充值</el-button>
                        </div>
                    </div> -->
                </div>
				<el-scrollbar class="text-item e-flex-1" :wrap-class="'text-item-wrap'">
					<el-menu 
                        :collapse="isCollapse" 
                        :router="true" 
                        :default-active="leftActiveIndex"
						@select="leftHandleSelect">
						<template v-for="(item,index) in menu">
							<el-submenu :index="item.active" v-if="item.children">
								<template slot="title">
									<i :class="item.icon" class="e-font-18 e-icon"></i>
									<span>{{item.title}}</span>
								</template>
								<template v-for="(cell,k) in item.children">
									<el-menu-item v-for="(m,i) in cell.list" :key="m.id" :index="m.path"
										:disabled="m.disabled" v-show="!m.disabled">{{m.name}}</el-menu-item>
								</template>
							</el-submenu>
							<el-menu-item :index="item.path" :disabled="item.disabled" v-else>
								<div class="item">
									<i :class="item.icon" class="e-font-18 e-icon"></i>
									<span slot="title">{{item.title}}</span>
								</div>
							</el-menu-item>
						</template>
					</el-menu>
					<!-- <i class="collapse-btn" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse = !isCollapse"></i> -->
				</el-scrollbar>
			</div>
			
			<!-- 主体内容 -->
			<div class="e-flex-1" style="overflow: hidden;">
                <!-- 头部菜单 -->
                <div class="admin-head-nav">
                    <div class="head-nav-flex">
                        <div class="logo-box">
                            <!-- <div class="logo" :style="'background-image:url('+ fileURL + websetting.adminlogoimg + ')'"></div> -->
                            <div class="title e-p-l-15">
								<div>{{ operator.name }}-</div>
								<div>
									<el-select v-model="operator.franchiseid" size="mini" placeholder="请选择" @change="changeFranchise">
										<el-option
											v-for="item in operator.franchiselist"
											:key="item.id"
											:label="item.name"
											:value="item.id"
											>
										</el-option>
									</el-select>
								</div>
								
								<!-- <div class="version">V 6.1</div> -->
							</div>
                        </div>
                        <div class="col">
                            <el-menu mode="horizontal" @select="headHandleSelect">
                                <el-submenu index="3">
                                    <template slot="title">
                                        <el-avatar style="margin-right: 10px;" :size="26"
                                            :src="adminInfo.photo == '' ? 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' : fileURL+adminInfo.photo">
                                        </el-avatar>
                                        <span>{{ adminInfo.name }}</span>
                                    </template>
                                    <!-- <el-menu-item index="myInfo">我的信息</el-menu-item>
                                    <el-menu-item index="modifyPwd">修改密码</el-menu-item> -->
                                    <el-menu-item index="logout">退出</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </div>
                    </div>
                </div>
                <!-- 面包屑导航 -->
				<!-- <el-breadcrumb separator="/" class="breadcrumb-box">
					<el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
					<el-breadcrumb-item 
						v-for="(item, index) in breadcrumbs" 
						:key="index"
						:to="item.path">
						{{ item.name }}
					</el-breadcrumb-item>
				</el-breadcrumb> -->
				<div class="container-page">
					<el-scrollbar class="text-item" :wrap-class="'text-item-wrap'">
						<nuxt />
					</el-scrollbar>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
import {
	mapState
} from 'vuex';

export default {
	data() {
		return {
			menu: [
				{
					title: '数据中台',
					icon: 'iconfont icon-tongji3',
					active: 'f1',
					path:'/franchisee/datacenter'
				},
				{
					title: '站点管理',
					icon: 'iconfont icon-shanghuliebiao',
					active: 'f2',
                    path:'/franchisee/shop/list'
				},
				{
					title: '回收订单',
					icon: 'iconfont icon-order',
					active: 'f3',
                    path:'/order/user/list',
				},
				{
					title: '入库订单',
					icon: 'iconfont icon-ruku1',
					active: 'f4',
                    path: '/order/brother/list'
				},
				{
					title: '出库订单',
					icon: 'iconfont icon-chuku1',
					active: 'f5',
                    path: '/order/store/list'
				},
				{
					title: '客户组管理',
					icon: 'iconfont icon-qian',
					active: 'f6',
                    path:'/enterprise/list'
				},
                {
					title: '员工管理',
					icon: 'iconfont icon-customer',
					active: 'f7',
                    path:'/franchisee/staff/list',
				},
                {
					title: '小哥管理',
					icon: 'iconfont icon-customer',
					active: 'f8',
                    path:'/franchisee/brother/list',
				},
				{
					title: '厂商列表',
					icon: 'iconfont icon-huishouzhan',
					active: 'f9',
					path: '/franchisee/manufacturer/list'
				},
				{
					title: '充值余额',
					icon: 'iconfont icon-jichandanjia',
					active: '10',
					path: '/franchisee/chargeRecord'
				},
				// {
				// 	title: '设置',
				// 	icon: 'iconfont icon-shezhi',
				// 	active: 'f8',
                //     path:'/franchisee/setting'
				// },
			],
			isCollapse: false,
			leftActiveIndex: "f1",
			// 运营商信息
			operator:{
				id: 0, //运营商id
				name: '', //运营商名称
				franchiseid: null, //当前的加盟商id
				franchiselist: [], //运营商下的加盟商列表
			}
		}
	},
	watch: {
		
	},
	created() {
		if (process.client) {
            if (localStorage.getItem("leftIndex")) {
                this.leftActiveIndex = localStorage.getItem("leftIndex")
				this.$router.push({
					path: this.leftActiveIndex
				})
            }
			this.$axios.get('/Operator/Detail').then((res)=>{
				console.log('运营商详情',res)
				this.$store.commit('setOperator', res)
				// this.operator.name = res.name
			})

		}
	},
	mounted(){
		this.$store.dispatch('getUserInfo').then((res) => {
			// console.log('admin.vue-获取用户信息',res)
			// 当前登录的运营商
			let myOperator = res.bindinfo?.operator
			this.operator.name = myOperator.name
			this.operator.franchiselist = myOperator.franchiselist.filter((item)=>item.ismanager == true)
			if(!localStorage.getItem('franchiseid')){
				this.operator.franchiseid = Number(myOperator.franchiselist[0].id)
				localStorage.setItem('franchiseid',this.operator.franchiseid)
			}else{
				// 判断是否还能登录上一次的加盟商
				if(this.operator.franchiselist.some((item)=>item.id == localStorage.getItem('franchiseid'))){
					this.operator.franchiseid = Number(localStorage.getItem('franchiseid'))
				}else{
					this.operator.franchiseid = Number(myOperator.franchiselist[0].id)
				}
			}

			this.$axios.get('/Franchise/Detail?id='+this.operator.franchiseid).then((res)=>{
				console.log('加盟商详情',res)
				this.$store.commit('setFranchise', res)
			})
		})
	},
	computed: {
		...mapState({
			adminInfo: state => state.userdetail,
			loading: state => state.loading
		}),
        breadcrumbs() {
			const crumbs = []
			// 查找当前路由匹配的叶子节点
			const findLeaf = (items) => {
				for (const item of items) {
					if (item.path === this.$route.path) {
						return item
					}
					if (item.children) {
						const found = findLeaf(item.children.flatMap(c => c.list))
						if (found) return { ...item, children: null, ...found }
					}
				}
			}

			// 查找父级菜单
			const leaf = findLeaf(this.menu)
			if (leaf) {
				// 查找父级菜单
				const parent = this.menu.find(m => 
					m.children?.some(c => 
					c.list?.some(i => i.path === leaf.path)
					)
				)
				
				if (parent) {
					crumbs.push({ 
						name: parent.title,
						path: parent.path
					})
				}
				crumbs.push({
					name: leaf.name,
					path: leaf.path
				})
			}
			return crumbs
		}
	},
	methods: {
		// 切换加盟商
		changeFranchise(id){
			localStorage.setItem("franchiseid",id)
			this.$nextTick(() => {
				// 刷新页面
				location.reload();
			})
		},
		logout() {
            if (process.client) {
                localStorage.removeItem('lifeData')
                localStorage.removeItem('leftIndex')
            }
            this.$router.push({
                path:'/login'
            })
		},
        headHandleSelect(key) {
			// console.log(key)
			// if (key == 'myInfo') {
			// 	this.getMydata()
			// 	this.dialogVisible = true
			// }
			// if (key == 'modifyPwd') {
			// 	this.dialogVisible2 = true
			// }
			if (key == 'logout') {
				if (process.client) {
					localStorage.removeItem('lifeData')
					localStorage.removeItem('leftIndex')
				}
				this.$router.push({
					path:'/login'
				})
			}
		},
		leftHandleSelect(key) {
			if (process.client) {
				localStorage.setItem('leftIndex', key)
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.container-page,.container{
    min-height: calc(100vh - 91px);
}

.breadcrumb-box {
	padding: 15px 20px;
	background: #fff;
	border-bottom: 1px solid #ebeef5;
	margin-bottom: 1px;
}

.admin-nav {
    .admin-head-nav {
		.head-nav-flex {
			display: flex;
			border-bottom: solid 1px #e6e6e6;
			background-color: #fff;

			.el-menu {
				border-bottom: 0;
				display: flex;
				justify-content: flex-end;
			}

			.col {
				display: flex;
				padding-left: 15px;
			}

			.logo-box {
				display: flex;
				flex: 1;

				.logo {
					background-repeat: no-repeat;
					background-position: center;
					background-size: 80%;
					// background-color: #fff;
					width: 60px;
					height: 60px;
					box-sizing: border-box;
				}

				.title {
					display: flex;
					// height: 60px;
					align-items: center;
					padding: 0 50px 0 5px;
					font-size: 18px;
				}

				.version {
					font-size: 12px;
					color: var(--grey);
					padding-left: 10px;
				}
			}

			.icon-nemu {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 22px;
					margin-left: 30px;
					cursor: pointer;
				}
			}

			.col-auto {
				flex: 1;
			}
		}
	}

	.admin-content {
		display: flex;

		.admin-left-nav {
            display: flex;
            flex-direction: column;
			// border-right: solid 1px #e6e6e6;
			box-shadow: 0 0 16px 0 rgba(0, 0, 0, .04);
			width: 220px;
            // height: 100vh;
            overflow: hidden;
            background: var(--dark);
            color: #fff;

            .admin-left-nav-top{
                .item{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    // height: 180px;
                    // border-bottom: 1px solid var(--border-light);
                    padding: 15px 0;
                    .num{
                        font-size: 24px;
                        font-weight: bold;
                        color: var(--orange);
                    }
                }
            }

			.el-menu {
				width: 220px;
				border-right: 0;
                background-color: var(--dark);
                .el-menu-item{
                    color: #c3c3c3;
					display: flex;
					align-items: center;
					.item{
						padding: 0 10px;
						height: 42px;
						line-height: 42px;
						border-radius: 4px;
						width: 100%;
						display: flex;
    					align-items: center;
					}
                    &.is-active{
                        // background-color: #e6fbfb!important;
						// border-left: 4px solid var(--main);
                        // color: var(--main)!important;
						border-right: 0;
						background-color: inherit;
                        // .iconfont{
                        //     // color: var(--main)!important;
						// 	color: #fff;
                        // }
						.item{
							background-color: var(--main);
							color: #fff;
							.iconfont{
								// color: var(--main)!important;
								color: #fff;
							}
						}
                    }
                    &:hover{
                        // background-color: #e6fbfb!important;
						background: inherit;
                        color: var(--main);
                        .iconfont{
                            color: var(--main);
                        }
                    }
                }
			}

			.e-icon{
				display: inline-block;
    			width: 25px;
                color: #c3c3c3;
				margin-right: 6px;
			}

			.collapse-btn {
				cursor: pointer;
				padding: 5px;
				background-color: var(--light);
				position: absolute;
				bottom: 10px;
				right: 18px;

				&:hover {
					background-color: var(--blue);
					color: #fff;
				}
			}

			.text-item {
				height: calc(100vh - 181px);

				::v-deep{
					.text-item-wrap {
						overflow-x: hidden;
					}
				}
			}

			.left-nav-title {
				line-height: 50px;
				padding: 0 15px;
				font-size: 16px;
				position: relative;
				border-bottom: 1px solid var(--light);
				width: 160px;
			}

			.left-nav-sub-title {
				font-weight: bold;
				color: #000;
				font-size: 14px;
				display: block;
				border-bottom: 1px solid var(--light);
				padding-bottom: 10px;
				margin-right: 20px;
			}

			.el-menu-item-group {
				margin-bottom: 15px;
			}

			.el-menu-vertical {
				border-right: 0;
			}

			.admin-left-head-nav {
				display: flex;
				flex-direction: column;

				.el-menu-item {
					text-align: center
				}
			}
		}

		.container-page {
			// flex: 1;
			// min-width: 800px;

			.text-item {
				height: 100%;
    			border-radius: 5px;
				::v-deep{
					.text-item-wrap {
						overflow-x: hidden !important;
					}
				}
			}
		}
	}

	.el-menu-vertical {
		.el-menu-item {
			font-size: 14px;
			line-height: 48px;
			height: 48px;
		}
	}

	.el-menu--collapse {
		width: 64px !important;
		text-align: center;
		height: calc(100vh - 100px);
		border-right: 0;

		.el-menu-item>div {
			padding: 0 13px !important;
		}
	}
}

.el-submenu.is-active.is-opened {
	.el-submenu__title {
		color: var(--main);

		.iconfont {
			color: var(--main);
		}

		.el-submenu__icon-arrow {
			color: var(--main);
		}
	}
}
</style>